<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>关注时回复</title>
    <script src="../js/vue.js"></script>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/reply-attention.css">
    <link rel="stylesheet" href="../js/layui/css/layui.css">
</head>
<body>
        <div id="app">
                <!-- 头部 -->
                <top-bar ref="topbar"></top-bar>
                <!-- 开始 -->
                <div class="displayCenter">
                    <!-- 左边导航 -->
                    <div class="leftBox"> <left-site :pagetype="pagetype"></left-site></div>
                    <div class="pageContent fffBackground">
                        <section class="weizhi">
                            您当前所在的位置：站点设置>关注时回复
                        </section>

                        <section class="tabber displayBetween" >
                            <section>
                                <span id="numberOne" class="activeTab" style="position:relative;">关注时回复<img src="../img/gzhInfo01.png"/>
                                    <div class="menuDescription numberOne">
                                            <section >
                                                    1. 用户关注公众号时自动回复给用户的消息<br>
                                                    2. 符合个性对象的用户，关注公众号时，自动回复对应规则的消息内容；<br>
                                                    3.若同一用户符合多个规则的个性条件，按设置的消息顺序由上至下匹配。
                
                                                    <i class="arrow arrow_out"></i>
                                                    <i class="arrow arrow_in"></i>
                                            </section>
                                        </div>
                                
                                </span>
                                <span id="numberTwo" class="activeTab" style="position:relative;">消息回复<img src="../img/gzhInfo01.png"/>
                                    <div class="menuDescription numberTwo">
                                            <section >
                                                    1.用户发送的关键词未命中时，系统自动回复消息。<br>
                                                    2.符合个性对象的用户，系统回复对应规则的消息内容。 <br>
                                                    3.若同一用户符合多个规则的个性条件，按设置的消息顺序由上至下匹配。 <br>
                                                    4. 由于微信限制，消息回复图文仅支持单图文，若设置多图文，则会被拆成一篇篇单图文发送（非认证公众号默认只发送第一篇图文）。<br>

                                                    <i class="arrow arrow_out"></i>
                                                    <i class="arrow arrow_in"></i>
                                            </section>
                                        </div>
                                </span>
                                <span  id="numberThree" class="activeTab" style="position:relative;">关键词回复<img src="../img/gzhInfo01.png"/>
                                
                                    <div class="menuDescription numberThree">
                                            <section >
                                                    1. 用户发送的内容与设置的关键词规则一致，公众号自动推送消息。<br>
                                                    2. 已认证公众号一个回复规则内最多可设置10个关键词，5条回复消息（非认证公众号只能回复一条消息）；<br>
                                                    3. 若粉丝命中多个规则内的关键词，则以最新创建的规则为准。<br>
                                                    4. 认证公众号设置文本消息回复时，可插入用户昵称及用户序号。<br>
                                                    5. 关键词的命中规则分为“全匹配”与“半匹配”。全匹配即粉丝发送的内容与关键词一模一样才会触发回复；半匹配即只要粉丝发送的内容包含完整的关键词就会触发回复。<br>
                                                    6. 关键词回复全部多条内容时，按照新建时间顺序依次发送，但可能由于微信发送延时导致部分顺序变化<br>
                                                    7. 由于微信限制，关键词回复图文仅支持单图文，若设置多图文，则会被拆成一篇篇单图文发送（非认证公众号默认只发送第一篇图文）                  
                                                    <i class="arrow arrow_out"></i>
                                                    <i class="arrow arrow_in"></i>
                                            </section>
                                        </div>
                                
                                </span>
                            </section>
                            
                            <!-- <div>
                               <a style="color: #337ab7;cursor:pointer">自定义菜单说明</a><img src="../img/gzhInfo01.png"/>
                            </div> -->
                        </section>

                        <section class="handleBtns">
                            <span @click="addReply" class="activeBtn" style="display: inline-block;width:100px;height:30px;line-height:30px;text-align:center;border-radius:5px;">+添加回复</span>
                            <div>
                              <span>规则名称：<input/></span>
                              <span class="handleBtns-search activeBtn" @click="search">搜索</span>
                            </div>
                        </section>
                       
                        <section class="reply-attentionTabel">
                                <table class="layui-hide" id="reply-attentionTabel"></table> 
                        </section>
                    </div>
                </div>
        </div>
</body>
<!-- 头部 -->
<script src="../common/top-bar.js"></script>
<!-- 左侧导航栏 -->
<script src="../common/left-site.js"></script>
<!-- 提示弹窗 -->
<!-- <script src="../common/dialog.js"></script> -->
<script src="../js/public.js"></script>
<script src="../js/layui/layui.js" charset="utf-8"></script>
<script>
        new Vue({
            el:'#app',
            data:{
                dialogdata: null,
                dialogShow:false,
                pagetype:'zidonghuifu',
            },
            created:function(){
            },
            methods:{
                addReply:function(){
                    alert('添加回复')
                },
                search:function(){
                    alert('搜索')
                }
            }
        })
    
    
</script>
<script type="text/html" id="barDemo">
    <!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> -->
    <a class="cazuoBtn" onclick="edit(this)">编辑</a>
    <a class="cazuoBtn" onclick="del(this)">删除</a>
</script>

<script type="text/html" id="sortImg">
    {{#  if(d.LAY_INDEX < 2){ }}
      <span class="sortImg-arrow down" onclick="arrowClick(this,'down')"></span>
      <span class="sortImg-arrow downBottom" onclick="arrowClick(this,'downBottom')"></span>
    {{#  } else { }}
        <span class="sortImg-arrow down" onclick="arrowClick(this,'down')"></span>
        <span class="sortImg-arrow downBottom" onclick="arrowClick(this,'downBottom')"></span>
        
        <span class="sortImg-arrow upTop" onclick="arrowClick(this,'upTop')"></span>
        <span class="sortImg-arrow up"  onclick="arrowClick(this,'up')"></span>
    {{#  } }}
  </script>
<script>
    
  layui.use('table',function(){
      var table = layui.table;

      table.render({
          elem:'#reply-attentionTabel'
          ,url: './ceshi3.json'
          ,cols:[[
             {field:'id', title: 'ID', width:0, sort: true, fixed: true,hide:true}
            ,{field:'rulesName', title: '规则名称', width:240}
            // ,{field:'replyType', title: '消息回复类型', width:160,templet: '#erweimaImg'}
            ,{field:'replyType', title: '消息回复类型', width:160}
            ,{field:'sendObg', title: '发送对象', width:160}
            ,{title:'排序',width:240,templet: '#sortImg'}
            ,{title: '操作', align:'center',width:230,toolbar: '#barDemo'}
          ]]
          ,id: 'testReload'
        ,page: {
            layout: ['count','limit',  'prev', 'page', 'next', 'skip'], //自定义分页布局
            prev:'上一页',
            next:'下一页'
        }
        ,height: 540
        ,skin: 'nob'
        //even:true
        // 数据渲染完的回调
        ,done: function (res, curr, count) {
            var divs='<div style="width:100%;height:100%;text-align:center;padding-top:50px;"><img style="margin-bottom:10px" src="../img/noData.png" /> <br/><span style="color:#aeaeae;">暂无数据</span></div>'
            $(".layui-table-main").html(divs)
             
            }
      })
      //   var $ = layui.$, active = {
//     reload: function(){
//       //var demoReload = $('#demoReload');
      
//       //执行重载
//       table.reload('testReload', {
//         page: {
//           curr: 1 //重新从第 1 页开始
//         }
//         ,where: {
//           key: {
//             id: demoReload.val()
//           }
//         }
//       }, 'data');
//     }
//   };
  
//   $('.demoTable .layui-btn').on('click', function(){
//     var type = $(this).data('type');
//     active[type] ? active[type].call(this) : '';
//   });
  })
  function arrowClick(t,type){//箭头操作
      console.log(t,$(t),type)
      console.log($(t).parents('tr').find('.layui-hide').text())
      var ids = $(t).parents('tr').find('.layui-hide').text()
     
      switch (type) {
          case 'down':
             alert("点击了id:"+ids+'的向下箭头')
              break;
        case 'downBottom':
             alert("点击了id:"+ids+'的向下下下下下箭头')
             break;
        case 'up':
             alert("点击了id:"+ids+'的向上箭头')
             break;
        case 'upTop':
            alert("点击了id:"+ids+'的向上上上上箭头')
             break;
      }
  }
  function edit(t) {
    var ids = $(t).parents('tr').find('.layui-hide').text()
    alert('编辑了id:'+ids)
  }
  function del(t) {
    var ids = $(t).parents('tr').find('.layui-hide').text()
    alert('删除了id:'+ids)
  }

 

</script>


</html>